<template>
  <view class="wrap">
    <view class="header">
      <img
        v-if="state.contentObj.templateType == '预警通知'"
        class="headerBg"
        src="https://ainengli.hzjrsw.com/jkhx/warning.png"
        alt=""
      />
      <img
        v-else-if="state.contentObj.templateType == '健康处方'"
        class="headerBg"
        src="https://ainengli.hzjrsw.com/jkhx/healthPrescription.png"
        alt=""
      />
      <img
        v-else-if="state.contentObj.templateType == '用药提醒'"
        class="headerBg"
        src="https://ainengli.hzjrsw.com/jkhx/medicationRemind.png"
        alt=""
      />
      <img v-else class="headerBg" src="https://ainengli.hzjrsw.com/jkhx/visitRemind.png" alt="" />
    </view>
    <view class="prescriptionList">
      <view class="item">
        <view class="name">{{ state.contentObj.templateType }}</view>
        <view class="title">{{
          state.contentObj.planTime
            ? transformTimeTwo(
                new Date(state.contentObj.planTime.replace(/\-/g, '/')).getTime(),
                'minutesdd'
              ).replace(/\//g, '-')
            : ''
        }}</view>
      </view>
      <view class="prescriptionWrap on">
        <text v-if="state.contentObj.itemContent" class="content on">
          {{ state.contentObj.itemContent.replaceAll(' ', '&nbsp;') }}
        </text>
      </view>
    </view>
    <view
      class="btn"
      v-if="
        state.contentObj.templateType == '预警通知' &&
        state.userInfo &&
        state.userInfo.isVip == false
      "
      @tap="buyFun"
    >
      <view class="wraps">
        <text class="name">获取更多健康方案</text>
        <img class="img" src="@/static/image/more-white.png" alt="" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { readDetail, taskDetailInfo } from '@/api/hmm'
import { transformTimeTwo } from '@/utils/hmm'
const state = reactive({
  id: '',
  contentObj: {},
  userInfo: {},
  getUserId: '',
  dateStatus: ''
})
onLoad((options) => {
  state.id = options.id
  state.dateStatus = options.dateStatus
})
onShow(() => {
  state.userInfo = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).patientInfo
    : {}
  state.getUserId = uni.getStorageSync('userInfo')
    ? JSON.parse(uni.getStorageSync('userInfo')).userId
    : ''
  init()
})
const init = () => {
  uni.showLoading({
    title: '加载中'
  })
  if (state.dateStatus && state.dateStatus != 0) {
    const param = {
      empi: state.userInfo.empi,
      id: state.id,
      userId: state.getUserId
    }
    readDetail(param).then((res) => {
      if (res.code == 0) {
        console.log(res.data)
      }
    })
  }

  taskDetailInfo(state.id).then((res) => {
    uni.hideLoading()
    if (res.code == 0) {
      state.contentObj = res.data
      if (state.contentObj.templateType == '预警通知') {
        uni.setNavigationBarTitle({
          title: '预警通知'
        })
      } else if (state.contentObj.templateType == '健康处方') {
        uni.setNavigationBarTitle({
          title: '健康处方'
        })
      } else if (state.contentObj.templateType == '用药提醒') {
        uni.setNavigationBarTitle({
          title: '用药提醒'
        })
      } else {
        uni.setNavigationBarTitle({
          title: '就诊提醒'
        })
      }
    }
  })
}
const buyFun = () => {
  uni.navigateTo({
    url: '/packA/pages/buyMember/index?source=sourceHealthManageDetail&id=' + state.id
  })
}
</script>

<style lang="scss" scoped>
.wrap {
  min-height: calc(100vh - 48rpx);
  padding-bottom: 48rpx;
  background: #f3f7f8;

  .header {
    position: relative;
    height: 328rpx;

    .headerBg {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
    }
  }

  .prescriptionList {
    position: relative;
    z-index: 1;
    display: block;
    padding-bottom: 32rpx;
    margin: -130rpx 32rpx 0;
    background: #fff;
    border-radius: 16rpx;

    .item {
      position: relative;
      display: block;
      padding: 32rpx 32rpx 0;

      .name {
        font-size: 32rpx;
        font-weight: 700;
        color: #222;
      }

      .title {
        position: absolute;
        top: calc(50% + 16rpx);
        right: 32rpx;
        z-index: 1;
        font-size: 28rpx;
        color: #999;
        text-align: center;
        transform: translateY(-50%);
      }
    }

    .prescriptionWrap {
      padding: 24rpx 24rpx 0;
      margin: 24rpx 32rpx 0;
      background: #fafafa;
      border-radius: 12rpx;

      &.on {
        padding: 24rpx 32rpx;
      }

      .content {
        display: -webkit-box;
        overflow: hidden;
        font-size: 30rpx;
        color: #666;
        text-align: justify;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;

        &.on {
          -webkit-line-clamp: inherit;
        }
      }

      .detail {
        padding: 20rpx 0;
        text-align: center;
        border-top: 1rpx solid #e5e6eb;

        .name {
          display: inline-block;
          font-size: 28rpx;
          font-weight: 400;
          color: #00d1b6;
          vertical-align: middle;
        }

        .image {
          display: inline-block;
          width: 32rpx;
          height: 32rpx;
          margin-left: 8rpx;
          vertical-align: middle;
          transform: rotate(90deg);

          &.on {
            transform: rotate(270deg);
          }
        }
      }
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    background: #fff;

    .wraps {
      height: 88rpx;
      margin: 22rpx 32rpx;
      line-height: 88rpx;
      text-align: center;
      background: #00d1b6;
      border-radius: 44rpx;

      .name {
        display: inline-block;
        font-size: 32rpx;
        font-weight: 700;
        color: #fff;
        vertical-align: middle;
      }

      .img {
        display: inline-block;
        width: 40rpx;
        height: 40rpx;
        vertical-align: middle;
      }
    }
  }
}
</style>
